<template>
  <div class="mod-talentPool">
    <!-- 查询条件 -->
    <div class="search-form search_form" v-loading='loadingPage'>
      <el-form :model="searchForm" size="mini" label-position="right" class="demo-form-inline" label-width="110px">
        <el-row :gutter="10">
          <el-col :span="3.5">
            <el-form-item label="姓名：">
              <el-input v-model="searchForm.xm" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="人员编号：" prop="ygbh">
              <el-select v-model="searchForm.ygbh" placeholder="请选择人员编号" filterable clearable>
                <el-option
                    v-for="item  in  ygbhList"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="申报单位：">
              <el-input v-model="searchForm.ssdw" placeholder="请输入申报单位"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="人才类别：">
              <el-input v-model="searchForm.rclb" placeholder="请输入人才类别"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="职称/职务：">
              <el-input v-model="searchForm.zw" placeholder="请输入职称/职务"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="职业技能等级：">
              <el-input v-model="searchForm.zyjndj" placeholder="请输入职业技能等级"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3.5" style="text-align:center;">
            <el-button size="mini" type="primary" @click="searchBtn">查询</el-button>
            <el-button size="mini" @click="emptyClick">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%;"
      border>
      <el-table-column
        prop="xm"
        header-align="center"
        align="center"
        label="姓名">
      </el-table-column>
      <el-table-column
          prop="ygbh"
          header-align="center"
          align="center"
          label="人员编号">
      </el-table-column>
      <el-table-column
        prop="ssdw"
        header-align="center"
        align="center"
        label="申报单位">
      </el-table-column>

      <el-table-column
        prop="rclb"
        header-align="center"
        align="center"
        label="人才类别">
      </el-table-column>
      <el-table-column
        prop="zw"
        header-align="center"
        align="center"
        label="职称/职务">
      </el-table-column>
      <el-table-column
        prop="zyjndj"
        header-align="center"
        align="center"
        label="职业技能等级">
      </el-table-column>
    </el-table>
    <div class="progress_lok_page">
      <page
        :hidden="tableData && tableData.length === 0"
        :total="total"
        :page.sync="pageNo"
        :limit.sync="pageSize"
        @pagination="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import { Encrypt } from '../../utils/cryptoAES'
  import { AesDecrypt } from '../../utils/AesDecrypt'

  export default {
    data() {
      return {
        ygbhList: [],
        tableData: [],
        loadingPage: true,
        loading: true,
        currentPage: 0,
        pageNo: 1,
        pageSize: 10,
        total: 0,
        searchForm: {
          xm: '',//  姓名
          ygbh: '',//人员编号
          ssdw: '',//申报单位
          rclb: '',//人才类别
          zw: '',//职称/职务
          zyjndj: ''//职业技能等级

        },
        dialogTableVisible: false
      }
    },
    created() {
      this.getList ()
      this.getYgbh ()
    },
    methods: {
      // 获取列表
      getList() {
        var uu = {
          page: this.pageNo,
          pageSize: this.pageSize,
          xm: this.searchForm.xm,//姓名
          ygbh: this.searchForm.ygbh,//人员编号
          ssdw: this.searchForm.ssdw,//申报单位
          rclb: this.searchForm.rclb,//人才类别
          zw: this.searchForm.zw,//职称/职务
          zyjndj: this.searchForm.zyjndj//职称/职务
        }
        var jsonString = JSON.stringify (uu)
        var yy = Encrypt (jsonString)
        var encodedString = encodeURIComponent (yy)
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/cockpit/talent-pool/page',
          data: encodedString
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            var data = AesDecrypt (data.result)
            this.tableData = data.content
            this.total = data.total
            this.loading = false
            this.loadingPage = false
          } else {
            this.loading = false
            this.loadingPage = false
            this.$message.error (data.msg)
            this.tableData = []
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      getYgbh() {
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/cockpit/talent-pool/queryYgbh'
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            var data = AesDecrypt (data.result)
            this.ygbhList = data
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      // 查询
      searchBtn() {
        this.loading = true
        this.page = 1
        this.getList ()
      },
      // 清空
      emptyClick() {
        this.searchForm.xm = ''
        this.searchForm.ygbh = ''
        this.searchForm.ssdw = ''
        this.searchForm.rclb = ''
        this.searchForm.zw = ''
        this.searchForm.zyjndj = ''
      },
      /** 点击分页触发的事件 */
      handlePageChange(pageInfo) {
        this.loading = true
        this.pageNo = pageInfo.page
        this.pageSize = pageInfo.limit
        this.getList ()
      }
    }
  }
</script>
